<template>
  <div>
    <div class="nav">
      <van-nav-bar @click-left="$router.go(-1)" title="城市列表" left-arrow />
    </div>
    <van-index-bar :index-list="indexList" highlight-color="#088">
      <van-index-anchor index="#"
        >当前城市
        <van-cell title="文本" @click="$router.go(-1)" />
      </van-index-anchor>

      <van-index-anchor index="热"
        >热门城市
        <van-cell
          :title="item.label"
          v-for="item in info"
          :key="item.value"
          @click="cgo"
      /></van-index-anchor>
      <van-index-anchor
        :index="item.char"
        v-for="item in allCity"
        :key="item.char"
        >{{ item.char }}
        <van-cell
          :title="abc"
          v-for="(abc, index) in item.citylist"
          :key="index"
          @click="goc"
        />
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
import { getCity, gethotCity } from '@/api/Homepage'
export default {
  name: 'collect',
  data () {
    return {
      info: null,
      allCity: null,
      indexList: ['#']
    }
  },
  methods:{

  },

  async created () {
    const data = await gethotCity()
    this.info = data.body
    const { body } = await getCity(1)
    // 将数据处理为一个数组，每一项是一个对象，包含两个键值对，一个存储首字母，一个存储首字母对应的城市数组
    const arr = []

    for (let i = 65; i <= 90; i++) {
      const cityArr = []
      body.forEach(item => {
        if (item.short.charAt(0).toUpperCase() === String.fromCharCode(i)) {
          cityArr.push(item.label)
        }
      })
      if (cityArr.length) {
        const obj = {
          char: String.fromCharCode(i),
          citylist: cityArr
        }
        arr.push(obj)
      }
    }

    console.log(arr)
    this.allCity = arr
    // 获取首字母列表
    const firstCharList = []
    arr.forEach(item => firstCharList.push(item.char))
    this.indexList = [...this.indexList, ...firstCharList]
    console.log(this.indexList)

    // console.log(firstCharList)
    // console.log(data)
    // console.log(body)
    // console.log(arr)
  }
}
</script>
